<!doctype html>

<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="styles/kendo.metro.min.css" rel="stylesheet">
        <link href="styles/kendo.common.min.css" rel="stylesheet">
        <link href="myStyles/myCSS.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
	</head>
    
    <title>Dinh Muc</title>
    
    <script type="text/x-kendo-template" id="template">
    	<div class="subgrid"></div>
    </script>

	<body>
    <div id="screen">
    	<input type="button" value="Select Row" onClick="selectRow(3)">
        <input type="button" value="For Trying" onClick="tryIt()">
    	<div id = "feedback"></div>
    	<div id="grid"></div>
        <script>
			var grid;
			var selectedRows = Array();
			
			function tryIt()
			{
				alert(selectedRows);
			}
			
			function selectRow(rowIndex)
			{
				//alert("Change begin");
				var grid = $("#grid").data("kendoGrid"),
					
					row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(rowIndex);
				
				grid.select(row);	
				//alert("Change end");
			}
			function detailInit(e)
			{
				var detailRow = e.detailRow;
				
				detailRow.find(".subgrid").kendoGrid(
				{
					dataSource: {
						transport: { read: "data/territories.php"},
						schema: { data: "data"},
						serverFiltering: true,
						filter: { field: "EmpoyeeID", operator: "eq", value: e.data.EmployeeID}
							
					},
					
					columns: [{ title: "Territories", field: "TerritoryDescription"}],
				}
				);	
			}
			
			function onSelectedChange(arg)
			{
				//alert("Change");
				var selected = $.map(this.select(), function(item) {
                        return $(item).text();
                    });
				//
				selectedRows.push(selected.toString().substring(0,8));
				alert(selected.toString().substring(0,8));
			}
			
			$(function()
				{
					grid = $("#grid").kendoGrid({
						dataSource:{
							transport:{
								read: "data/dinhmuc.php"								
							},	
							//MSCV;TPHP;DVT;TENCV;KL;MATINH;STT					
							schema: {
								data: "data",
								model: {
									id: "MSCV",
									fields: {
										EmployeeID: { editable: false},
										FirstName: { editable: false},
										LastName: { 
											editable: true											
										}
											
									}
								}								
							}
						},
						change: onSelectedChange,
						selectable: "multiple",						
						columns: [
							{field: "MSCV", width: 70},
							{field: "TPHP", width: 150}, 
							{field: "DVT", width: 40},
							{field: "TENCV", width: 320},
							{field: "KL", width: 40},
							{field: "MATINH", width: 50},
							{field: "STT", width: 30}
						],
						//detailTemplate: kendo.template($("#template").html()),
						//detailInit: detailInit,
						//editable: true,
						//navigable: true,
						//toolbar: ["save", "cancel"]
					});	
				}
				
			);
		</script>
        
    </div>    
    </body>
</html>